<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="/include/commonHeader::commonHeader('在位统计')"></head>
<style>
    .fc-body .fc-resource-area tr td{
        white-space:normal;
        line-height:1 !important;
    }
    .calender-content{
        height:calc(100% - 60px);
    }
    .fc-body .fc-resource-area tr td .fc-cell-content{
        display:table;
        width:100%;
        height: 100%;
    }
    .fc-body .fc-resource-area tr td .fc-cell-content .fc-cell-text{
        display:table-cell;
        vertical-align:middle;
    }
</style>
<body class="gray-bg layer-blue">
<div class="wrapper wrapper-content animated fadeInRight full-container full-height" id="summary-page">
    <div class="row">
        <div class="col-xs-12 same-height-box">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="btn-group table-tool" id="table1-toolbar" role="group">
                        <input type="text" placeholder="开始日期" style="width:100px;"
                               class="table-tool-btn pull-left text-center" id="startDate"/>
                        <span class="pull-left" style="display:inline-block;border-top:1px solid #1c84c6;border-bottom:1px solid #1c84c6;line-height:26px;">-</span>
                        <input type="text" placeholder="结束日期" style="width:100px;border-left:none;"
                               class="table-tool-btn pull-left text-center" id="endDate"/>
                        <!--<input type="text" placeholder="人员姓名/拼音" style="width:120px;"
                               class="table-tool-btn pull-left" id="workcode"/>-->
                        <select id="workcode" name="workcode" class="table-tool-btn pull-left"></select>
                        <button type="button" class="btn btn-outline btn-success btn-refresh" data-toggle="tooltip"
                                title="查询" id="btn-search">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </button>
                        <!--<button type="button" class="btn btn-outline btn-success btn-refresh" data-toggle="tooltip"
                                title="刷新" id="btn-refresh"><i class="fa fa-refresh" aria-hidden="true"></i>
                            &lt;!&ndash;<i class="fa fa-search" aria-hidden="true"></i>&ndash;&gt;
                        </button>-->
                    </div>
                    <div class="calender-content">
                        <div id="calendar" class="break-word-cf">
                        </div>
                    </div>
                    <div class="text-center">
                        <ul id="paginator" class="pagination" style="margin:0;">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src='/plugins/fullcalendar/fullcalendar.min.js'></script>
<script src='/plugins/fullcalendar/scheduler.min.js'></script>
<script src='/plugins/fullcalendar/locale-all.js'></script>
<script src='/js/jqpaginator.min.js'></script>
<script th:inline="javascript">
    var moduleFlag = [[${moduleFlag}]];
    var index;//loading 图示
    var offset = 0;//首页第一条记录的索引
    var limit = 20;//分页每页显示的数量
    var crewData = [];//当前页面人员信息
    var personTotal = 0;//人员总数
    var isInit = true;//是否是初始化日历
    $(document).ready(function () {
        $.fn.select2.defaults.set("theme", "bootstrap"); //使用select2-bootstrap主题
        moment.locale("zh-cn");
        //控件初始化
        $("#startDate").datetimepicker({
            minView: "month",
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayBtn: true,
            bootcssVer:3,
            todayHighlight: true,
            pickerPosition: "bottom-right"
        }).on("changeDate",function(){
            $('#endDate').datetimepicker('setStartDate', $("#startDate").val());
        });
        $("#endDate").datetimepicker({
            minView: "month",
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayBtn: true,
            bootcssVer:3,
            todayHighlight: true,
            pickerPosition: "bottom-right"
        }).on("changeDate",function(){
            $('#startDate').datetimepicker('setEndDate', $("#endDate").val());
        });
        /*var start = moment().startOf('month').format("YYYY-MM-DD");
        var end = moment().format("YYYY-MM-DD");*/
        //var start = '2018-03-09';
        var start = moment(new Date()).subtract(7, 'days').format("YYYY-MM-DD");
        //var end = '2018-03-15';
        var end = moment(new Date()).add(7, 'days').format("YYYY-MM-DD");
        $("#startDate").datetimepicker('setDate', new Date(start)).trigger('change');
        $("#endDate").datetimepicker('setDate', new Date(end)).trigger('change');
        $('#workcode').select2({
            minimumInputLength: 2,
            placeholder: '人员姓名/拼音',
            width: '150',
            allowClear: true,
            language: {
                inputTooShort: function (e) {
                    var t = e.minimum - e.input.length;
                    return "请再输入至少" + t + "个字符";
                }
            },
            ajax: {
                url: '/select2/getStaff',
                dataType: 'json',
                method: 'post',
                data: function (params) {
                    var keyWord = params.term;
                    var query = {
                        key: params.term
                    }
                    if (keyWord.length > 1) {
                        return query;
                    } else {
                        return false;
                    }
                },
                processResults: function (data) {
                    // Tranforms the top-level key of the response object from 'items' to 'results'
                    return {
                        results: data
                    };
                }
            }
        });
        $("#workcode").val(null).trigger("change");
        $("#btn-search").click(function(){
            isInit = true;
            init();
        });
        init();
        //绑定查询按钮
        $("#btn-refresh").click(function () {
            $("#calendar").fullCalendar("refetchEvents");
            $("#calendar").fullCalendar("refetchResources");
            currentFlightLine = {};
            $("#isBadRouteDiv").addClass("hide");
            $("#table-task-done").bootstrapTable("refresh");
        });
    });

    function init() {
        var start = moment($("#startDate").val());
        var end = moment($("#endDate").val());
        var diffDay = end.diff(start, 'days')+1;
        crewData = getCrewData(offset,limit);
        $('#calendar').fullCalendar( 'destroy' ).fullCalendar({
            schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives', //scheduler非商业授权证书
            now: start,
            height:'parent',
            header: {
                left: '',
                center: '',
                right: ''
            },
            locale: 'zh-cn',
            defaultView: 'timelineThreeDays',
            views: {
                timelineThreeDays: {
                    type: 'timeline',
                    duration: { days: diffDay },
                    slotDuration: '4:00',
                }
            },
            resourceAreaWidth: '220',
            resourceColumns: [
                {
                    labelText: '部门',
                    group:true,
                    field: 'depName',
                    width:'45'
                },
                {
                    labelText: '姓名',
                    field: 'cName',
                    width:'45'
                },
                {
                    labelText: '职务',
                    field: 'dutyCode',
                    width:'45',
                    text: function(resource, el) {
                        //F飞行员 C乘务员 A安全员
                        var result = " ";
                        if(resource.dutyCode && resource.dutyCode == "A"){
                            result = "安全员";
                        }else if(resource.dutyCode && resource.dutyCode == "F"){
                            result = "飞行员";
                        }else{
                            result = "乘务员";
                        }
                        return result;
                    }
                    /*render: function(resource, el){
                        //F飞行员 C乘务员 A安全员
                        var result = " ";
                        if(resource.dutyCode && resource.dutyCode == "A"){
                            result = "安全员";
                        }else if(resource.dutyCode && resource.dutyCode == "F"){
                            result = "飞行员";
                        }else{
                            result = "乘务员";
                        }
                        return result;
                    }*/
                },
                {
                    labelText: '授权',
                    field: 'techName',
                    width:'40',
                    text: function(resource, el) {
                        //F飞行员 C乘务员 A安全员
                        var result = " ";
                        if(resource.techZList[0] && resource.techZList[0].techName){
                            result = resource.techZList[0].techName;
                        }
                        return result;
                    }
                   /* render: function(resource, el) {
                        var result = " ";
                        if(resource.techZList[0] && resource.techZList[0].techName){
                            result = resource.techZList[0].techName;
                        }
                        return result;
                    }*/
                }
            ],
            resources: function(callback) {
                callback(crewData);
            },
            events: function (start, end, timezone, callback) {
                var param = {
                    startDate: $("#startDate").val(),
                    endDate: $("#endDate").val(),
                    moduleFlag:moduleFlag,
                };
                var workCodes = '';
                for(var i=0;i<crewData.length;i++){
                    workCodes += crewData[i].workcode + ",";
                }
                param.workcodeArray = workCodes.substring(0,workCodes.length-1);

                var events = [];
                $.ajax({
                    url: '/crewTaskReport/listCrewTaskPage',
                    dataType: 'json',
                    type: "post",
                    data: param,
                    success: function (datas) {
                        //事件设置可以拖动的起止时间

                        var result = datas;
                        for(var i=0;i<result.length;i++){
                            events[i] = {};
                            events[i].resourceId = result[i].workcode;
                            events[i].start = result[i].start;
                            events[i].end = result[i].end;
                            events[i].allDay = false;
                            events[i].title = result[i].taskDesc;
                        }
                        callback(events);
                    }
                });

            },
            loading:function(isLoading,view){
                if(isLoading){
                    index = layer.load();
                }else{
                    layer.close(index);
                }
            },
            eventRender: function (event, $element) {

            },
            eventMouseover: function (event, jsEvent, view) {
                console.log(event)
            },
            eventMouseout: function (event, jsEvent, view) {
            },
            eventDragStart: function (event, jsEvent, ui, view) {
            },
            eventDrop: function (event, delta, revertFunc, jsEvent, ui, view) {
            },
            drop: function(date, jsEvent, ui, resourceId) {
            },
            eventDragStop:function( event, jsEvent, ui, view ) {
            },
            eventAllow: function (dropInfo, draggedEvent) {
            },
            eventClick: function (event, jsEvent, view) {
            },
            eventAfterAllRender:function(view){
            }
        });

        $('#paginator').jqPaginator({
            totalPages: Math.ceil(personTotal/limit),
            visiblePages: 10,
            currentPage: 1,
            first: '<li class="first"><a href="javascript:;">首页</a></li>',
            prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>上一页</a></li>',
            next: '<li class="next"><a href="javascript:;">下一页<i class="arrow arrow3"></i></a></li>',
            last: '<li class="last"><a href="javascript:;">末页</a></li>',
            page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
            onPageChange: function (num, type) {
                if(!isInit){
                    var thisPageOff = (num -1) * limit;
                    crewData = getCrewData(thisPageOff, limit);
                    $("#calendar").fullCalendar("refetchEvents");
                    $("#calendar").fullCalendar("refetchResources");
                }
                isInit = false;
            }
        });
    }

    function strIsEmpty(str) {
        if (str == null || str == '' || str == undefined) {
            return true;
        } else {
            return false;
        }
    }
    function getCrewData(off,pageSize){
        var result = [];
        $.ajax({
            type: "post",
            url: "/crewTaskReport/listCrewPage",
            async:false,
            data: {
                moduleFlag: moduleFlag,
                workcode:$("#workcode").val(),
                offset:off,
                limit:pageSize
            },
            dataType: 'json',
            success: function (datas) {
                var data = datas.rows;
                for(var i=0;i<data.length;i++){
                    data[i].id = data[i].workcode;
                    data[i].eventColor = '#3a87ad !important';
                }
                result = data;
                personTotal = datas.total;
            }
        });
        return result;
    }
</script>
</body>
</html>